<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top:15%;height: 70%;overflow-y: hidden">
    <template slot="footer">
      <a-button key="back" v-if="isReadOnly" @click="handleCancel">
        关闭
      </a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form" id="ClassHourModal">
        <div v-show="show2">
          <a-col :span="24/2">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="老师名称">
              <a-input placeholder="请输入名称" v-decorator.trim="[ 'tname' ]" />
            </a-form-item>
          </a-col>
          <a-col :span="24/2">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="班级名称">
              <a-input placeholder="请输入名称" v-decorator.trim="[ 'cname' ]" />
            </a-form-item>
          </a-col>
          <a-col :span="24/2">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="月份">
              <a-input placeholder="请输入名称" type="date" v-decorator.trim="[ 'date' ]" />
            </a-form-item>
          </a-col>
<!--          <a-col :span="24/2">-->
<!--            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上午">-->
<!--              <a-input placeholder="请输入名称" v-decorator.trim="[ 'am' ]" value="0" />-->
<!--            </a-form-item>-->
<!--          </a-col>-->
<!--          <a-col :span="24/2">-->
<!--            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上午">-->
<!--              <a-input placeholder="请输入名称" v-decorator.trim="[ 'pm' ]" value="0" />-->
<!--            </a-form-item>-->
<!--          </a-col>-->
        </div>
        <div v-show="show1">
          <a-col :lg="12" :md="12" :sm="24" style="float: left">
            <img :src="'http://'+model.stuImg" width="60px" height="60px"/>
          </a-col>
          <a-col :span="24/2" style="float: left">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="老师">
              {{model.tname}}
            </a-form-item>
          </a-col>
          <a-col :span="24/2" style="float: left">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="班级">
              {{model.cname}}
            </a-form-item>
          </a-col>
          <a-col :span="24/2" style="float: left">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="学生">
              {{model.stuName}}
            </a-form-item>
          </a-col>
          <a-col :span="24/2" style="float: left">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="学分">
              {{model.credit}}
            </a-form-item>
          </a-col>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" style="width: 100%">

           <table border="1px" width="100%" style="text-align: center">
              <tr>
                <td>日期</td>
                <td>原因</td>
              </tr>
              <tr v-for="(list,index) in model.deductionList" v-if="model.deductionList[index].sid==model.id">
                <td>
                  <input type="date" v-model="model.deductionList[index].cdate">
                </td>
                <td>
                  <input type="text" v-model="model.deductionList[index].reason">
                </td>
              </tr>
             <tr v-for="(list,index) in num">
               <td>
                  <input type="date" v-model="model.creditTables[index].cdate">
               </td>
               <td>
                 <a-select v-model="model.creditTables[index].reaName" showSearch optionFilterProp="children">
                   <a-select-option value="迟到">迟到</a-select-option>
                   <a-select-option value="早退">早退</a-select-option>
                   <a-select-option value="升班">升班</a-select-option>
                   <a-select-option value="打架">打架</a-select-option>
                 </a-select>
               </td>
             </tr>
           </table>
<!--            <button @click="jia(model.creditTables)">添加</button>-->
          </a-form-item>
        </div>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
  import pick from 'lodash.pick'
  import {addCredit,editCredit,checkSupplier } from '@/api/api'
  import {autoJumpNextInput} from "@/utils/util"
  import JImageUploadFdfs from '@/components/jeecg/JImageUploadFdfs'
  export default {
    name: "TeaModal",
    components:{
      JImageUploadFdfs
    },
    data () {
      return {
        num:1,
        title:"操作",
        visible: false,
        model: {},
        isReadOnly: false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        show1: false,
        show2: false,
        form: this.$form.createForm(this),
        validatorRules:{
          supplier:{
            rules: [
              { required: true, message: '请输入名称!' },
              { min: 2, max: 60, message: '长度在 2 到 60 个字符', trigger: 'blur' },
              { validator: this.validateSupplierName}
            ]
          }
        },
      }
    },
    created () {
    },
    methods: {
      jia(){
        this.num +=1;
      },
      add (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.show2=true;
        this.show1=false;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'sid','tname', 'cname', 'stuName', 'credit','cname','deductionList','stuImg','creditTables'))
          autoJumpNextInput('ClassHourModal')
        });
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.show1=true;
        this.show2=false;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'sid','tname', 'cname', 'stuName', 'credit','cname','deductionList','stuImg','creditTables'))
          autoJumpNextInput('ClassHourModal')
        });
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let formData = Object.assign(this.model, values);
            if(this.model.beginNeedGet && this.model.beginNeedPay) {
              that.$message.warn("期初应收和期初应付不能同时输入");
              that.confirmLoading = false;
              return;
            }
            formData.type = "客户";
            let obj;
            if(!this.model.id){
              obj=addCredit(formData);
            }else{
              obj=editCredit(formData);
            }
            obj.then((res)=>{
              if(res.code === 200){
                that.$emit('ok');
              }else{
                that.$message.warning(res.data.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })
          }
        })
      },
      handleCancel () {
        this.close()
      },
      validateSupplierName(rule, value, callback){
        let params = {
          name: value,
          type: '客户',
          id: this.model.id?this.model.id:0
        };
        checkSupplier(params).then((res)=>{
          if(res && res.code===200) {
            if(!res.data.status){
              callback();
            } else {
              callback("名称已经存在");
            }
          } else {
            callback(res.data);
          }
        });
      },

    }
  }
</script>
<style scoped>

</style>